﻿{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
    <!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/user-list.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/static/css/kkpager_blue.css">

    <style type="text/css">
    *{font-family:'Microsoft YaHei';}
    .name{display: block;font-weight: 600;font-size: 14px;
        margin:15px 0 0 0;}
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
                <div id="pad-wrapper" class="users-list">
                    <div class="row-fluid header">
                        <h3>交易信息</h3>
                        <div class="span10 pull-right">
                            <input type="text" class="span5 search" id="query" placeholder="输入想要查询的客户名..." value="{{query}}"/>
                            <input type="button" class="btn-glow" id="btn_search" value="开始查询" title="点击查询" style="height: 30px;line-height: 20px;" />
                        </div>
                    </div>
                </div>

                    <div class="row-fluid">
                       <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="span1">
                                        <input type="checkbox" />
                                        交易日期
                                    </th>
                                    <th class="span1">
                                        交易类型
                                    </th>
                                    <th class="span2">
                                        <span class="line"></span>收入
                                    </th>
                                    <th class="span2">
                                       <span class="line"></span>支出
                                    </th>
                                    <th class="span2">
                                       <span class="line"></span>货币单位
                                    </th>
                                    <th class="span1">
                                        <span class="line"></span>收益
                                    </th>
                                    <th class="span3">
                                        <span class="line"></span>备注
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- row -->
                                {% if transations_table%}
                                {% for trans in transations_table %}
                                <tr>
                                    <td>
                                        <input type="checkbox" style="margin-top: 4px" />
                                        #{{transations_table.id}}
                                    </td>
                                    <td>
                                        {{ transations_table.trans_datatime}}
                                    </td>
                                    <td>
                                        {{transations_table.trans_type}}
                                    </td>
                                    <td>
                                        {{transations_table.income}}
                                    </td>
                                    <td>
                                        {{transations_table.expenditure}}
                                    </td>
                                    <td>{{transations_table.currency}}</td>
                                    <td>{{transations_table.trans_balance}}</td>

                                    <td class="description">
                                        {{transations_table.memo}}
                                    </td>
                                </tr>
                                {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                <div class="pagination" id="kkpager">
                </div>
                </div>
                <!-- end products table -->
            </div>
        </div>
{% endblock %}

    {% block customizedJS %}
    <script src="/static/js/kkpager.min.js"></script>
    <script src="/static/js/angular.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            $("#btn_search").click(function(){
                var query=$("#query").val();
                if(query!=""){
                    window.location.href="fim/list?query="+query
                } else{
                    window.location.href="fim/list/"
                }
            });
        });

        function getParameter(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        }
        $(function(){
            var totalPage ={{totalPage}};
            var totalRecords ={{totalRecords}};
            var pageNo = getParameter('page');
            var query="{{query}}";
            var latter="";
            if(!pageNo){
                pageNo = 1;
            }
            if(query=="None"){
                latter="";
            }
            //生成分页
            //有些参数是可选的，比如lang若不传有默认值
            kkpager.generPageHtml({
                pno : pageNo,
                //总页码
                total : totalPage,
                //总数据条数
                totalRecords : totalRecords,
                //链接前部
                hrefFormer : '/fim/list/',
                //链接尾部
                hrefLatter : '?query='+latter,
                getLink : function(n){
                    return this.hrefFormer + this.hrefLatter + "&page="+n;
                }
            });
        });
        </script>
{% endblock %}

